<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酒店空调管理系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Noto Sans SC', sans-serif;
        }

        :root {
            --primary: #2c6fbb;
            --primary-dark: #1a5a9e;
            --secondary: #3498db;
            --accent: #e67e22;
            --accent-dark: #d35400;
            --light: #f8f9fa;
            --dark: #343a40;
            --success: #27ae60;
            --warning: #f39c12;
            --danger: #e74c3c;
            --gray: #6c757d;
            --light-gray: #e9ecef;
            --border-radius: 10px;
            --box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s ease;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e2e8f0 100%);
            min-height: 100vh;
            padding: 20px;
            color: #333;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        header {
            text-align: center;
            padding: 25px 0;
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            margin-bottom: 25px;
            position: relative;
            overflow: hidden;
        }

        header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(90deg, var(--primary), var(--accent));
        }

        header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }

        header h1 i {
            background: var(--primary);
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        header p {
            font-size: 1.1rem;
            color: var(--gray);
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.6;
            padding: 0 20px;
        }

        .user-selector {
            display: flex;
            justify-content: center;
            margin: 30px 0;
            flex-wrap: wrap;
            gap: 15px;
        }

        .user-btn {
            padding: 14px 32px;
            background: white;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
            color: var(--dark);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .user-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
            background: #f8f9fa;
        }

        .user-btn.active {
            background: var(--primary);
            color: white;
            box-shadow: 0 4px 10px rgba(44, 111, 187, 0.4);
        }

        .user-btn i {
            font-size: 1.2rem;
        }

        .interface-section {
            display: none;
            background: white;
            border-radius: var(--border-radius);
            padding: 30px;
            box-shadow: var(--box-shadow);
            margin-bottom: 30px;
            animation: fadeIn 0.5s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .interface-section.active {
            display: block;
        }

        .section-title {
            font-size: 1.8rem;
            color: var(--primary);
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid var(--light-gray);
            display: flex;
            align-items: center;
        }

        .section-title i {
            margin-right: 12px;
            background: var(--secondary);
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            margin-top: 20px;
        }

        .card {
            background: white;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--box-shadow);
            transition: var(--transition);
            border: 1px solid var(--light-gray);
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12);
        }

        .card-header {
            background: var(--primary);
            color: white;
            padding: 18px 20px;
            font-size: 1.3rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .card-body {
            padding: 25px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--dark);
            font-size: 1.05rem;
        }

        .form-control {
            width: 100%;
            padding: 13px 16px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 1rem;
            transition: border-color 0.3s;
            background: #f8f9fa;
        }

        .form-control:focus {
            border-color: var(--secondary);
            outline: none;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
            background: white;
        }

        .btn {
            padding: 13px 28px;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .btn:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }

        .btn-primary {
            background: var(--primary);
            color: white;
        }

        .btn-primary:hover:not(:disabled) {
            background: var(--primary-dark);
        }

        .btn-block {
            display: block;
            width: 100%;
        }

        .accent-btn {
            background: var(--accent);
            color: white;
        }

        .accent-btn:hover:not(:disabled) {
            background: var(--accent-dark);
        }

        .success-btn {
            background: var(--success);
            color: white;
        }

        .danger-btn {
            background: var(--danger);
            color: white;
        }

        .dashboard {
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            gap: 30px;
        }

        .control-panel {
            background: #f8f9fa;
            border-radius: var(--border-radius);
            padding: 25px;
            box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
            border: 1px solid var(--light-gray);
        }

        .temp-display-container {
            position: relative;
            margin: 20px 0;
        }

        .temp-display {
            text-align: center;
            font-size: 5rem;
            font-weight: 300;
            color: var(--primary);
            position: relative;
            height: 130px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .temp-display::after {
            content: "°C";
            font-size: 2rem;
            position: absolute;
            top: 20px;
            right: calc(50% - 70px);
        }

        .room-temp-label {
            text-align: center;
            color: var(--gray);
            font-size: 1.1rem;
            margin-top: -10px;
            margin-bottom: 20px;
        }

        .temp-controls {
            display: flex;
            justify-content: space-between;
            margin: 25px 0;
        }

        .temp-btn {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: none;
            background: var(--secondary);
            color: white;
            font-size: 1.8rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: var(--transition);
        }

        .temp-btn:hover {
            transform: scale(1.08);
        }

        .mode-selector {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin: 25px 0;
        }

        .mode-btn {
            flex: 1;
            min-width: 120px;
            padding: 14px 10px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background: white;
            cursor: pointer;
            transition: var(--transition);
            text-align: center;
            font-weight: 500;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }

        .mode-btn i {
            font-size: 1.5rem;
        }

        .mode-btn.active {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
            box-shadow: 0 4px 8px rgba(44, 111, 187, 0.2);
        }

        .mode-btn:not(.active):hover {
            background: #f0f7ff;
        }

        .fan-speed {
            margin: 30px 0;
        }

        .speed-option {
            display: flex;
            align-items: center;
            padding: 14px 15px;
            border-radius: 8px;
            margin-bottom: 12px;
            cursor: pointer;
            transition: var(--transition);
            background: white;
            border: 1px solid #eee;
        }

        .speed-option:hover {
            background: #eef7ff;
        }

        .speed-option.active {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }

        .speed-option i {
            margin-right: 12px;
            font-size: 1.3rem;
        }

        .cost-display {
            background: white;
            border-radius: var(--border-radius);
            padding: 20px;
            margin-top: 25px;
            text-align: center;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            border: 1px solid var(--light-gray);
        }

        .cost-label {
            font-size: 1.1rem;
            color: var(--gray);
            margin-bottom: 8px;
        }

        .cost-value {
            font-size: 2.2rem;
            font-weight: bold;
            color: var(--primary);
        }

        .status-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .status-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 20px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.08);
            border-left: 5px solid var(--primary);
            transition: var(--transition);
        }

        .status-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .status-card.occupied {
            border-left-color: var(--success);
        }

        .status-card.maintenance {
            border-left-color: var(--warning);
        }

        .status-card.closed {
            border-left-color: var(--danger);
        }

        .room-number {
            font-weight: bold;
            font-size: 1.3rem;
            margin-bottom: 8px;
            color: var(--dark);
        }

        .room-status {
            font-size: 0.95rem;
            color: var(--gray);
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

        .room-info {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }

        .info-label {
            font-size: 0.9rem;
            color: var(--gray);
        }

        .info-value {
            font-weight: 600;
            color: var(--dark);
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            font-size: 0.95rem;
        }

        th, td {
            padding: 14px 16px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }

        th {
            background-color: #f8f9fa;
            font-weight: 600;
            color: var(--dark);
            position: sticky;
            top: 0;
        }

        tr:hover {
            background-color: #f5f9ff;
        }

        .status-badge {
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            display: inline-block;
        }

        .status-badge.available {
            background: #e8f7f0;
            color: var(--success);
        }

        .status-badge.occupied {
            background: #fdefe9;
            color: var(--danger);
        }

        .status-badge.maintenance {
            background: #fef5e7;
            color: var(--warning);
        }

        .status-badge.running {
            background: #e8f4ff;
            color: var(--primary);
        }

        .priority-badge {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: 500;
        }

        .priority-high {
            background: #ffebee;
            color: #c62828;
        }

        .priority-medium {
            background: #fff8e1;
            color: #f57f17;
        }

        .priority-low {
            background: #e8f5e9;
            color: #2e7d32;
        }

        .queue-container {
            background: white;
            border-radius: var(--border-radius);
            padding: 20px;
            margin-top: 30px;
            box-shadow: var(--box-shadow);
        }

        .queue-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .queue-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.05);
            border: 1px solid #eee;
        }

        .queue-title {
            font-weight: 600;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .queue-item {
            display: flex;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid #f5f5f5;
        }

        .queue-item:last-child {
            border-bottom: none;
        }

        .room-info-small {
            font-weight: 500;
        }

        .time-info {
            color: var(--gray);
            font-size: 0.9rem;
        }

        footer {
            text-align: center;
            padding: 30px 0 20px;
            color: var(--gray);
            font-size: 0.95rem;
            margin-top: 20px;
        }

        .system-info {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 15px;
            flex-wrap: wrap;
        }

        .info-item {
            background: white;
            padding: 12px 20px;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.05);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        @media (max-width: 900px) {
            .dashboard {
                grid-template-columns: 1fr;
            }
            
            .card-grid {
                grid-template-columns: 1fr;
            }
            
            .user-selector {
                flex-direction: column;
                align-items: center;
            }
            
            .user-btn {
                width: 100%;
                max-width: 400px;
                margin-bottom: 5px;
            }
        }

        @media (max-width: 600px) {
            .mode-btn {
                min-width: 100%;
            }
            
            .temp-controls {
                flex-direction: column;
                align-items: center;
                gap: 20px;
            }
            
            .temp-btn {
                width: 70px;
                height: 70px;
            }
        }

        .chart-container {
            height: 300px;
            margin-top: 20px;
        }

        .form-row {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }

        .form-row .form-group {
            flex: 1;
            margin-bottom: 0;
        }

        .bill-details {
            background: #f8f9fa;
            border-radius: var(--border-radius);
            padding: 20px;
            margin: 20px 0;
        }

        .bill-row {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }

        .bill-row:last-child {
            border-bottom: none;
        }

        .bill-total {
            font-weight: bold;
            font-size: 1.2rem;
            color: var(--primary);
            padding-top: 10px;
            margin-top: 10px;
            border-top: 2px solid #ddd;
        }

        .usage-log {
            max-height: 300px;
            overflow-y: auto;
            margin-top: 20px;
            border: 1px solid #eee;
            border-radius: var(--border-radius);
            padding: 15px;
        }

        .log-item {
            padding: 10px 0;
            border-bottom: 1px solid #f5f5f5;
        }

        .log-item:last-child {
            border-bottom: none;
        }

        .admin-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 25px;
        }

        .admin-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 25px;
            box-shadow: var(--box-shadow);
        }

        .admin-card h3 {
            margin-bottom: 20px;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .stat-number {
            font-size: 2.5rem;
            font-weight: bold;
            text-align: center;
            margin: 15px 0;
        }

        .stat-label {
            text-align: center;
            color: var(--gray);
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-wind"></i> 酒店空调管理系统</h1>
            <p>基于节能环保理念的自助计费式中央温控系统 - 为不同用户提供专属界面</p>
        </header>

        <div class="user-selector">
            <button class="user-btn active" data-user="customer">
                <i class="fas fa-user"></i> 顾客空调控制面板
            </button>
            <button class="user-btn" data-user="reception">
                <i class="fas fa-concierge-bell"></i> 前台入住结账系统
            </button>
            <button class="user-btn" data-user="admin">
                <i class="fas fa-tachometer-alt"></i> 管理员监控系统
            </button>
        </div>

        <!-- 顾客空调控制面板 -->
        <section id="customer" class="interface-section active">
            <h2 class="section-title"><i class="fas fa-thermometer-half"></i> 客房空调控制面板</h2>
            
            <div class="dashboard">
                <div class="control-panel">
                    <div class="form-group">
                        <label for="room-select"><i class="fas fa-door-open"></i> 当前房间</label>
                        <select id="room-select" class="form-control">
                            <option value="101">101 - 豪华大床房</option>
                            <option value="102">102 - 豪华双床房</option>
                            <option value="201">201 - 行政套房</option>
                            <option value="202">202 - 海景大床房</option>
                        </select>
                    </div>
                    
                    <div class="temp-display-container">
                        <div class="temp-display">24.5</div>
                        <div class="room-temp-label">当前房间温度</div>
                    </div>
                    
                    <div class="temp-controls">
                        <button class="temp-btn" id="temp-down">
                            <i class="fas fa-minus"></i>
                        </button>
                        <div style="text-align: center;">
                            <div style="font-size: 1.1rem; margin-bottom: 8px;">目标温度</div>
                            <div id="target-temp" style="font-size: 2rem; font-weight: bold; color: var(--primary);">24°C</div>
                        </div>
                        <button class="temp-btn" id="temp-up">
                            <i class="fas fa-plus"></i>
                        </button>
                    </div>
                    
                    <div class="mode-selector">
                        <button class="mode-btn active" data-mode="cool">
                            <i class="fas fa-snowflake"></i>
                            <span>制冷模式</span>
                            <small>18-25°C</small>
                        </button>
                        <button class="mode-btn" data-mode="heat">
                            <i class="fas fa-sun"></i>
                            <span>制热模式</span>
                            <small>25-30°C</small>
                        </button>
                        <button class="mode-btn" data-mode="off">
                            <i class="fas fa-power-off"></i>
                            <span>关闭空调</span>
                        </button>
                    </div>
                    
                    <div class="fan-speed">
                        <h3><i class="fas fa-fan"></i> 风速设置</h3>
                        <div class="speed-option active" data-speed="high">
                            <i class="fas fa-wind"></i> 
                            <div>
                                <div>高速模式</div>
                                <small>1度/分钟</small>
                            </div>
                        </div>
                        <div class="speed-option" data-speed="medium">
                            <i class="fas fa-wind"></i> 
                            <div>
                                <div>中速模式</div>
                                <small>1度/2分钟</small>
                            </div>
                        </div>
                        <div class="speed-option" data-speed="low">
                            <i class="fas fa-wind"></i> 
                            <div>
                                <div>低速模式</div>
                                <small>1度/3分钟</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="cost-display">
                        <div class="cost-label">当前使用费用</div>
                        <div class="cost-value">¥ 15.80</div>
                        <div style="font-size: 0.9rem; color: var(--gray); margin-top: 5px;">费率: 1元/度</div>
                    </div>
                </div>
                
                <div>
                    <h3><i class="fas fa-home"></i> 房间状态信息</h3>
                    <div class="status-grid">
                        <div class="status-card occupied">
                            <div class="room-number">101 房间</div>
                            <div class="room-status">入住中 · 张先生 · 已住2天</div>
                            <div class="room-info">
                                <div>
                                    <div class="info-label">当前温度</div>
                                    <div class="info-value">24°C</div>
                                </div>
                                <div>
                                    <div class="info-label">空调状态</div>
                                    <div class="info-value">运行中</div>
                                </div>
                            </div>
                            <div class="room-info">
                                <div>
                                    <div class="info-label">设定温度</div>
                                    <div class="info-value">24°C</div>
                                </div>
                                <div>
                                    <div class="info-label">当前风速</div>
                                    <div class="info-value">中速</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="status-card">
                            <div class="room-number">空调服务状态</div>
                            <div class="room-status">中央空调服务队列</div>
                            <div class="room-info">
                                <div>
                                    <div class="info-label">服务能力</div>
                                    <div class="info-value">4/6房间</div>
                                </div>
                                <div>
                                    <div class="info-label">等待队列</div>
                                    <div class="info-value">2房间</div>
                                </div>
                            </div>
                            <div style="margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee;">
                                <div style="display: flex; justify-content: space-between;">
                                    <div>当前优先级:</div>
                                    <div style="font-weight: bold; color: var(--success);">高</div>
                                </div>
                                <div style="display: flex; justify-content: space-between; margin-top: 8px;">
                                    <div>预计等待时间:</div>
                                    <div style="font-weight: bold;">45秒</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div style="margin-top: 30px;">
                        <h3><i class="fas fa-history"></i> 最近操作记录</h3>
                        <div class="usage-log">
                            <div class="log-item">
                                <div>2023-10-25 14:25:32</div>
                                <div>设定温度从 23°C 调整到 24°C</div>
                            </div>
                            <div class="log-item">
                                <div>2023-10-25 14:10:15</div>
                                <div>风速从高速调整为中速</div>
                            </div>
                            <div class="log-item">
                                <div>2023-10-25 13:45:08</div>
                                <div>空调开启，设定温度23°C，高速模式</div>
                            </div>
                            <div class="log-item">
                                <div>2023-10-25 10:30:22</div>
                                <div>空调关闭</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 前台入住结账系统 -->
        <section id="reception" class="interface-section">
            <h2 class="section-title"><i class="fas fa-key"></i> 酒店前台管理系统</h2>
            
            <div class="card-grid">
                <div class="card">
                    <div class="card-header"><i class="fas fa-user-check"></i> 办理入住</div>
                    <div class="card-body">
                        <div class="form-row">
                            <div class="form-group">
                                <label>客人姓名</label>
                                <input type="text" class="form-control" placeholder="输入客人姓名">
                            </div>
                            <div class="form-group">
                                <label>身份证号</label>
                                <input type="text" class="form-control" placeholder="输入身份证号">
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label>联系电话</label>
                                <input type="tel" class="form-control" placeholder="输入联系电话">
                            </div>
                            <div class="form-group">
                                <label>房间类型</label>
                                <select class="form-control">
                                    <option>豪华大床房 - ¥598/晚</option>
                                    <option>豪华双床房 - ¥658/晚</option>
                                    <option>行政套房 - ¥1298/晚</option>
                                    <option>海景大床房 - ¥898/晚</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label>入住日期</label>
                                <input type="date" class="form-control" value="2023-10-25">
                            </div>
                            <div class="form-group">
                                <label>入住天数</label>
                                <input type="number" class="form-control" value="3" min="1">
                            </div>
                        </div>
                        
                        <button class="btn btn-primary btn-block">
                            <i class="fas fa-check-circle"></i> 确认入住
                        </button>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header"><i class="fas fa-receipt"></i> 结账退房</div>
                    <div class="card-body">
                        <div class="form-group">
                            <label>房间号</label>
                            <input type="text" class="form-control" placeholder="输入房间号" value="101">
                        </div>
                        
                        <div style="margin-top: 20px;">
                            <h4>客人信息</h4>
                            <div style="display: flex; margin-top: 15px; gap: 20px;">
                                <div style="flex: 1;">
                                    <div><strong>姓名：</strong> 张先生</div>
                                    <div><strong>身份证：</strong> 310***19900101****</div>
                                    <div><strong>电话：</strong> 138****1234</div>
                                </div>
                                <div style="flex: 1;">
                                    <div><strong>房间：</strong> 101 - 豪华大床房</div>
                                    <div><strong>入住日期：</strong> 2023-10-22</div>
                                    <div><strong>退房日期：</strong> 2023-10-25</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bill-details">
                            <h4>空调使用费用明细</h4>
                            <div class="bill-row">
                                <div>基础房费 (3晚)</div>
                                <div>¥ 1,794.00</div>
                            </div>
                            <div class="bill-row">
                                <div>空调使用费用</div>
                                <div>¥ 86.50</div>
                            </div>
                            <div class="bill-row">
                                <div>其他消费</div>
                                <div>¥ 248.00</div>
                            </div>
                            <div class="bill-row bill-total">
                                <div>总计费用</div>
                                <div>¥ 2,128.50</div>
                            </div>
                        </div>
                        
                        <button class="btn accent-btn btn-block">
                            <i class="fas fa-cash-register"></i> 确认结账
                        </button>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header"><i class="fas fa-file-invoice-dollar"></i> 空调使用详单</div>
                    <div class="card-body">
                        <div style="margin-bottom: 20px;">
                            <h4>房间 101 - 张先生</h4>
                            <div style="color: var(--gray);">2023-10-22 至 2023-10-25</div>
                        </div>
                        
                        <table>
                            <thead>
                                <tr>
                                    <th>开始时间</th>
                                    <th>结束时间</th>
                                    <th>模式</th>
                                    <th>风速</th>
                                    <th>耗电(度)</th>
                                    <th>费用(元)</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>10-22 14:30</td>
                                    <td>10-22 18:45</td>
                                    <td>制冷</td>
                                    <td>高速</td>
                                    <td>4.2</td>
                                    <td>¥4.20</td>
                                </tr>
                                <tr>
                                    <td>10-22 20:15</td>
                                    <td>10-22 23:30</td>
                                    <td>制冷</td>
                                    <td>中速</td>
                                    <td>5.7</td>
                                    <td>¥5.70</td>
                                </tr>
                                <tr>
                                    <td>10-23 08:30</td>
                                    <td>10-23 12:15</td>
                                    <td>制冷</td>
                                    <td>高速</td>
                                    <td>3.8</td>
                                    <td>¥3.80</td>
                                </tr>
                                <tr>
                                    <td>10-23 14:00</td>
                                    <td>10-23 19:20</td>
                                    <td>制冷</td>
                                    <td>中速</td>
                                    <td>8.5</td>
                                    <td>¥8.50</td>
                                </tr>
                                <tr>
                                    <td>10-24 09:15</td>
                                    <td>10-24 17:40</td>
                                    <td>制冷</td>
                                    <td>低速</td>
                                    <td>15.2</td>
                                    <td>¥15.20</td>
                                </tr>
                                <tr>
                                    <td colspan="4" style="text-align: right; font-weight: bold;">总计：</td>
                                    <td style="font-weight: bold;">37.4</td>
                                    <td style="font-weight: bold; color: var(--primary);">¥37.40</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>

        <!-- 管理员监控系统 -->
        <section id="admin" class="interface-section">
            <h2 class="section-title"><i class="fas fa-chart-line"></i> 空调系统监控中心</h2>
            
            <div class="admin-grid">
                <div class="admin-card">
                    <h3><i class="fas fa-tachometer-alt"></i> 系统概览</h3>
                    <div class="stat-number" style="color: var(--primary);">24</div>
                    <div class="stat-label">运行中空调</div>
                    
                    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 25px;">
                        <div style="text-align: center;">
                            <div class="stat-number" style="color: var(--success);">18</div>
                            <div class="stat-label">正常运行</div>
                        </div>
                        <div style="text-align: center;">
                            <div class="stat-number" style="color: var(--warning);">2</div>
                            <div class="stat-label">需维护</div>
                        </div>
                        <div style="text-align: center;">
                            <div class="stat-number" style="color: var(--danger);">4</div>
                            <div class="stat-label">关闭</div>
                        </div>
                        <div style="text-align: center;">
                            <div class="stat-number" style="color: var(--accent);">6</div>
                            <div class="stat-label">空闲</div>
                        </div>
                    </div>
                </div>
                
                <div class="admin-card">
                    <h3><i class="fas fa-bolt"></i> 能耗统计</h3>
                    <div class="stat-number" style="color: var(--accent);">286.4</div>
                    <div class="stat-label">今日总能耗 (度)</div>
                    
                    <div style="margin-top: 25px;">
                        <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                            <div>空调费用收入:</div>
                            <div style="font-weight: bold; color: var(--success);">¥286.40</div>
                        </div>
                        <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                            <div>平均能耗/房间:</div>
                            <div style="font-weight: bold;">11.93 度</div>
                        </div>
                        <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                            <div>节能比例:</div>
                            <div style="font-weight: bold; color: var(--primary);">27.3%</div>
                        </div>
                    </div>
                </div>
                
                <div class="admin-card">
                    <h3><i class="fas fa-wind"></i> 中央空调服务状态</h3>
                    <div class="stat-number" style="color: var(--primary);">6</div>
                    <div class="stat-label">服务能力</div>
                    
                    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 25px;">
                        <div style="text-align: center;">
                            <div class="stat-number" style="color: var(--success);">4</div>
                            <div class="stat-label">服务中</div>
                        </div>
                        <div style="text-align: center;">
                            <div class="stat-number" style="color: var(--warning);">2</div>
                            <div class="stat-label">等待中</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="queue-container">
                <h3>服务队列</h3>
                <div class="queue-grid">
                    <div class="queue-card">
                        <div class="queue-title">
                            <i class="fas fa-play-circle"></i> 正在服务
                        </div>
                        <div class="queue-item">
                            <div class="room-info-small">101 房间</div>
                            <div>
                                <div class="priority-badge priority-high">高速</div>
                                <div class="time-info">已服务: 5分32秒</div>
                            </div>
                        </div>
                        <div class="queue-item">
                            <div class="room-info-small">205 房间</div>
                            <div>
                                <div class="priority-badge priority-high">高速</div>
                                <div class="time-info">已服务: 3分15秒</div>
                            </div>
                        </div>
                        <div class="queue-item">
                            <div class="room-info-small">302 房间</div>
                            <div>
                                <div class="priority-badge priority-medium">中速</div>
                                <div class="time-info">已服务: 8分45秒</div>
                            </div>
                        </div>
                        <div class="queue-item">
                            <div class="room-info-small">108 房间</div>
                            <div>
                                <div class="priority-badge priority-low">低速</div>
                                <div class="time-info">已服务: 12分20秒</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="queue-card">
                        <div class="queue-title">
                            <i class="fas fa-clock"></i> 等待队列
                        </div>
                        <div class="queue-item">
                            <div class="room-info-small">201 房间</div>
                            <div>
                                <div class="priority-badge priority-high">高速</div>
                                <div class="time-info">等待: 45秒</div>
                            </div>
                        </div>
                        <div class="queue-item">
                            <div class="room-info-small">115 房间</div>
                            <div>
                                <div class="priority-badge priority-medium">中速</div>
                                <div class="time-info">等待: 1分20秒</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div style="background: white; border-radius: var(--border-radius); padding: 25px; box-shadow: var(--box-shadow); margin-top: 20px;">
                <div style="display: flex; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 15px;">
                    <h3>所有房间空调状态</h3>
                    <div style="display: flex; gap: 10px;">
                        <div>
                            <select class="form-control">
                                <option>今日</option>
                                <option>本周</option>
                                <option>本月</option>
                                <option>自定义范围</option>
                            </select>
                        </div>
                        <button class="btn btn-primary">
                            <i class="fas fa-download"></i> 导出报表
                        </button>
                    </div>
                </div>
                
                <table>
                    <thead>
                        <tr>
                            <th>房间号</th>
                            <th>状态</th>
                            <th>当前温度</th>
                            <th>设定温度</th>
                            <th>模式</th>
                            <th>风速</th>
                            <th>耗电(度)</th>
                            <th>费用(元)</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>101</td>
                            <td><span class="status-badge running">运行中</span></td>
                            <td>24.5°C</td>
                            <td>24°C</td>
                            <td>制冷</td>
                            <td>中速</td>
                            <td>8.2</td>
                            <td>¥8.20</td>
                            <td><button class="btn" style="padding: 6px 12px;">调整</button></td>
                        </tr>
                        <tr>
                            <td>102</td>
                            <td><span class="status-badge available">关闭</span></td>
                            <td>26.0°C</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>0.0</td>
                            <td>¥0.00</td>
                            <td><button class="btn" style="padding: 6px 12px;">调整</button></td>
                        </tr>
                        <tr>
                            <td>201</td>
                            <td><span class="status-badge running">运行中</span></td>
                            <td>26.0°C</td>
                            <td>26°C</td>
                            <td>送风</td>
                            <td>低速</td>
                            <td>3.5</td>
                            <td>¥3.50</td>
                            <td><button class="btn" style="padding: 6px 12px;">调整</button></td>
                        </tr>
                        <tr>
                            <td>202</td>
                            <td><span class="status-badge maintenance">维护中</span></td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>0.0</td>
                            <td>¥0.00</td>
                            <td><button class="btn" style="padding: 6px 12px;">维护</button></td>
                        </tr>
                        <tr>
                            <td>301</td>
                            <td><span class="status-badge running">运行中</span></td>
                            <td>22.0°C</td>
                            <td>22°C</td>
                            <td>制冷</td>
                            <td>高速</td>
                            <td>12.7</td>
                            <td>¥12.70</td>
                            <td><button class="btn" style="padding: 6px 12px;">调整</button></td>
                        </tr>
                        <tr>
                            <td>302</td>
                            <td><span class="status-badge running">运行中</span></td>
                            <td>25.5°C</td>
                            <td>25°C</td>
                            <td>制冷</td>
                            <td>中速</td>
                            <td>7.8</td>
                            <td>¥7.80</td>
                            <td><button class="btn" style="padding: 6px 12px;">调整</button></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        <footer>
            <p>© 2023 酒店空调管理系统 | 节能环保 · 智能调度 · 精确计费 | 当前版本 v3.2.1</p>
            <div class="system-info">
                <div class="info-item">
                    <i class="fas fa-server"></i>
                    <span>系统状态: <strong>运行中</strong></span>
                </div>
                <div class="info-item">
                    <i class="fas fa-sync-alt"></i>
                    <span>最后更新: <strong>2023-10-25 15:32:18</strong></span>
                </div>
            </div>
        </footer>
    </div>

    <script>
        // 用户界面切换功能
        document.querySelectorAll('.user-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                // 移除所有活动状态
                document.querySelectorAll('.user-btn').forEach(b => b.classList.remove('active'));
                document.querySelectorAll('.interface-section').forEach(s => s.classList.remove('active'));
                
                // 添加当前活动状态
                btn.classList.add('active');
                const userId = btn.getAttribute('data-user');
                document.getElementById(userId).classList.add('active');
            });
        });
        
        // 模式选择功能
        document.querySelectorAll('.mode-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));
                btn.classList.add('active');
                
                // 更新温度范围显示
                const mode = btn.getAttribute('data-mode');
                const tempDisplay = document.getElementById('target-temp');
                let temp = parseInt(tempDisplay.textContent);
                
                if (mode === 'cool') {
                    // 制冷模式限制18-25度
                    temp = Math.max(18, Math.min(25, temp));
                } else if (mode === 'heat') {
                    // 制热模式限制25-30度
                    temp = Math.max(25, Math.min(30, temp));
                }
                
                tempDisplay.textContent = temp + '°C';
            });
        });
        
        // 风速选择功能
        document.querySelectorAll('.speed-option').forEach(option => {
            option.addEventListener('click', () => {
                document.querySelectorAll('.speed-option').forEach(o => o.classList.remove('active'));
                option.classList.add('active');
            });
        });
        
        // 温度控制功能
        const tempDisplay = document.getElementById('target-temp');
        let temperature = parseInt(tempDisplay.textContent);
        let lastTempChange = 0;
        
        document.getElementById('temp-down').addEventListener('click', () => {
            const now = Date.now();
            if (now - lastTempChange > 1000) {
                temperature--;
                updateTemperature();
            }
            lastTempChange = now;
        });
        
        document.getElementById('temp-up').addEventListener('click', () => {
            const now = Date.now();
            if (now - lastTempChange > 1000) {
                temperature++;
                updateTemperature();
            }
            lastTempChange = now;
        });
        
        function updateTemperature() {
            // 检查当前模式限制
            const activeMode = document.querySelector('.mode-btn.active').getAttribute('data-mode');
            
            if (activeMode === 'cool') {
                temperature = Math.max(18, Math.min(25, temperature));
            } else if (activeMode === 'heat') {
                temperature = Math.max(25, Math.min(30, temperature));
            }
            
            tempDisplay.textContent = temperature + '°C';
        }
    </script>
</body>
</html>